<template>
	<view class="app"> 		
		<view class="navtop">
			<view class="order-nav" :style="{top:BarTop + 'px',height:BarHeight + 'px',lineHeight:BarHeight + 'px'}" v-if="!flexflag">
				<view class="nav-location" >
					<u-icon name="map" color="#fff" size="36"></u-icon>
					<view class="location-name text-white">{{address}}</view>
				</view>
				<view class="text-white">云仓优送</view>
			</view>

		</view>
		<view class="top">
			<view class="box" @click="GotoSearch">
				<div class="search">
					<uni-icons type="search" size="20" color="#999999"></uni-icons>
					<div class="search-placeholder">搜索附近商家</div>
				</div>
			</view>
			<view class="swiper-tp">
				<swiper :indicator-dots="false" :autoplay="true" :interval="5000" :duration="150" class="banner-swiper"
				 :circular="true" indicator-color="rgba(255, 255, 255, 0.8)" indicator-active-color="#fff">
					<swiper-item v-for="(item, index) in banner" :key="index">
						<image :src="item.image" class="slide-image" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 店铺分类 -->
			<view class="category" >
				<block v-for="(item, index) in category" :key="index" v-if="index<4">
					<view class="category-item" @click="goCategory(item)">
						<view class="category-item-info">
							<image :src="item.image"></image>
							<text>{{item.name}}</text>
						</view>
					</view>
				</block>
			</view>	
			<!-- 店铺分类 -->
			<view class="category" v-if="category.length > 4">
				<block v-for="(item, index) in category" :key="index" v-if="index>=4">
					<view class="category-item" @click="goCategory(item)">
						<view class="category-item-info">
							<image :src="item.image"></image>
							<text>{{item.name}}</text>
						</view>
					</view>
				</block>
			</view>	
			<!-- 公告 -->
			<view class="poster">
				<image src="/static/images/poster.png" class="poster-img" mode="widthFix"></image>
				<swiper vertical autoplay circular interval="3000" class="swiper">
					<swiper-item v-for="(item,index) in notice" :key="index" class="swiper-item">
						<view class="item-box" @click="goNews">
							<text class="list-cell_name">{{item.title}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="swiper-tp" :style="{height: '388rpx'}">
				<swiper :disable-touch="false" class="banner-swiper" @touchstart="isSwiping = true" @change="isSwiping = false">
					<swiper-item v-for="(item, index) in promotion" :key="index">
						<image v-if="!isVideo(item.image)" :src="item.image" class="slide-image" mode="aspectFill"></image>
						<image v-else :src="item.cover" @click="playVideo(item.image,index)" class="slide-image" mode="aspectFill">
						<!-- INSERT_YOUR_CODE -->
						<view class="play-btn-overlay" v-if="isVideo(item.image)" @click.stop="playVideo(item.image,index)">
							<image src="https://admin.cqycgyl.com/uploads/20250927/57fd28630e35b7bc90fbe3546d3ec2aa.png" class="play-btn-img" mode="widthFix"></image>
						</view>
						</image>
					</swiper-item>
					
				</swiper>

			</view>
			
			
			<!-- 推荐商家 -->
			<view class="recommend-title" >推荐商家</view>
			<view class="recommend-list"  v-if="store && store.length > 0">
				<view class="shop-list">
					<view class="shop-item" v-for="(item,index) in store" :key="item.id" @click="Gotoinfo(item.id)">
						<image class="shop-item-img" :src="item.image" mode="aspectFill"></image>
						<view class="shop-item-info">
							<text class="shop-item-title text-1-row">{{item.title}}</text>
							<view class="shop-item-info-row">
								
								
							</view>
							
							 <view class="shop-info-footer">

									<view class="quan">
										<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/quan.png" mode="" ></image>
										<view class="quansp">
											{{item.quan_money}}
										</view>
									</view>
									<text class="shop-item-info-distance" v-if="item.distance">{{item.distance}}km</text>
							 </view>							
						</view> 
					</view>
				</view>
				<u-loadmore :status="status" style="width: 100%;text-align: center;"/>
			</view> 
		
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isSwiping: false,
				promotion: [],
				flexflag: false,
				BarTop:'',
				BarHeight:'',
				store: [],
				location:{},
				banner: [],
				category: [],
				notice: [],
				url:'https://admin.cqycgyl.com',
				sort: '',
				page: 1,
				pagesize: 10,
				status: 'loadmore',
				address: '位置获取中...',
				isOpen: false,
			}
		},
		onLoad() {
			if(uni.getStorageSync('agree')) {

			}else{
				uni.navigateTo({
					url:'/pages/toppage/toppage'
				})
			}
			// #ifdef MP
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.BarTop = menuButtonInfo.top;
			this.BarHeight = menuButtonInfo.height;
			
			// #endif
			// #ifdef APP-PLUS
				// 适配安卓，使用 getSystemInfoSync 获取状态栏高度
				const systemInfo = uni.getSystemInfoSync();
				this.BarTop = systemInfo.statusBarHeight;
				this.BarHeight = 44; // 安卓默认导航高度
			// #endif

			this.$u.api.shop.isOpen().then(res =>{
				if(res.code == 1){
					this.isOpen = res.data
				}
			})

			this.$u.api.describ.getHomePageNotice().then(res =>{
				if(res.code == 1){
					console.log('notice',res.data.notice)
					this.notice = res.data.notice
				}
			})
			
			this.getshoptypelist()
			this.getBannerList()		
		},
		onShow() {
			let location = {}
			let that = this
			// #ifdef WEB || APP-PLUS
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						location={
							lng:res?.longitude,
							lat:res?.latitude
						}
						that.location = location
						that.getStoreData(location)
					},
					fail: function (e){
						that.address = "位置获取失败..."
					},
				});
			// #endif
			// #ifdef MP-WEIXIN
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						location={
							lng:res?.longitude,
							lat:res?.latitude
						}
						that.location = location
						that.getStoreData(location)
					},
					fail: function (e){
						that.address = "位置获取失败..."
						uni.showModal({
						    title: '提示',
						    content: '此功能需要获取您的位置信息，请确认授权',
							success: function (modalRes) {
								if (modalRes.confirm) {
									// 引导用户去设置中开启位置服务
									uni.openSetting();
								}
							}
						});  
					},
				});
			// #endif
			
		},
		onReachBottom() {
			if(this.status == 'nomore'){
				return
			}else{
				this.page++;
				this.getStoreData(this.location)
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.flexflag = true
			} else {
			    this.flexflag = false
			}
		},
		methods:{
			playVideo(url,index){
				console.log('playVideo',url,index)
				uni.navigateTo({
					url:'/pageA/play-video/play-video?url=' + url
				})
			},
			isVideo(url){
				return url.includes('.mp4')
			},
			goNews(){
				uni.navigateTo({
					url:'./news'
				})
			},
			toTop(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			getStoreData(location){
				let that = this
				let params = {
					sort: that.sort,
					page: that.page,
					pagesize: that.pagesize,
					lng: location.lng,
					lat: location.lat
				}
				that.$u.api.index.getStoreData(params).then(res =>{
					if(res.code == 200){
						let data = res.data
						that.store = [...that.store,...data.list]
						that.address = data.address
						
						if(data.list.length == 0){
							that.status = 'nomore'
						}
						that.store.forEach(shop => {
							shop.fullStars = Math.floor(shop.star);
							shop.hasHalfStar = (shop.star % 1) >= 0.1;
							shop.emptyStars = 5 - shop.fullStars - (shop.hasHalfStar ? 1 : 0);
						});
					}
				})
			},
			Gotoinfo(id){
				uni.navigateTo({
					url:`../shop/detail?id=${id}`
				})
			},
			goCategory(item){
				let obj = {
					shoptype_id:item.shoptype_id,
					...this.location
				}
				uni.navigateTo({
					url:`../../pageA/Store/TypeInfo?item=${encodeURIComponent(JSON.stringify(obj))}`
				})
			},
			getshoptypelist(){
				this.$u.api.index.shoptypelist().then(res =>{
					if(res.code == 200){
						this.category = res.data
						this.category.forEach(val =>{
							val.image =  val.image 
							console.log('val.image',val.image)
							
						})
					}
				})
			},
			getBannerList(){
				this.$u.api.index.getBanner().then(res =>{
					this.banner = res.data.filter(item =>{
						return item.type == 3
					})
					this.banner.forEach(val =>{
						val.image = this.url + val.image 
					})
					return res;
				}).then(res=>{
					this.promotion = res.data.filter(item =>{
						return item.type == 5
					})
					
					this.promotion.forEach((val,index) =>{
						// 判断url是否为mp4视频
						if (val.image && val.image.toLowerCase().endsWith('.mp4')) {
							val.image = this.url + val.image;							
							val.cover = this.url + val.cover;
						}
						console.log('cover',val.cover)
					})
					
				});
			},
			swiperClick(e){
				if(this.list[e].url != ''){
					uni.navigateTo({
						url: this.list[e].url
					})
				}
			},
			GotoSearch(){
				uni.navigateTo({
					url:'./search'
				})
			},
		},
	}
</script>
<style scoped lang="scss"> 
	.container {
	  position: relative;
	  width: 100%;
	  height: 100%;
	}
	.navtop{ 
		position: relative;
		width: 100%;
		height: 444rpx;
		background: url('https://admin.cqycgyl.com/uploads/20250912/28728d977a19a8eff0346fcfe4a0f43f.png') center/cover;
		z-index: -1;
	}
	.nav-top{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 106rpx;
		background-color: #ffffff;
		z-index: 999;
	}
	.order-nav{width: 100%;font-size: 32rpx;font-weight: bold;text-align: center;position: fixed;color: black;z-index: 999;}
	.navtwo{background-color: white; z-index: 9999999}
	.nav-sp{position: absolute;width: 100%;left: 0rpx;text-align: center;}
	.text-white{color: #fff;}

	.about-content{
		width: 704rpx;
		margin: 0 auto;
		background-color: white;
		padding: 20rpx;
		border-radius: 20rpx;
	}
	.about-content-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.about-content-item-title{
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}
	.about-content-item-content{
		font-size: 24rpx;
		color: #666666;
		margin-top: 10rpx;
	}
	.nav-location{
		width: 240rpx;
		height: 100%;
		position: absolute;
		left: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.location-icon{
			height: 30rpx;
			width: 30rpx;
		}
		.location-name{
			flex: 1;
			width: 100%;
			height: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.top{
		position: relative;
		margin-top: -268rpx;
	}
	.search{
		width: 100%;
		height: 64rpx;
		box-sizing: border-box;
		background: white;		
		display: flex;
		align-items: center;
		padding: 22rpx;
		border-radius: 16rpx;
		.search-placeholder{
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}
	.search-sp{
		width: 100rpx;
		height: 28rpx;
		position: absolute;
		z-index: 10;
		line-height: 28rpx;
		border-left: #E8EDE9 1px solid;
		color: #36BE6A;
		font-size: 28rpx;
		top:19rpx;
		text-align: center;
	}
	.box{
		width: 704rpx;
		height: 72rpx;
		margin: 0 auto;
		display: flex;
		box-sizing: border-box;
	}
	.box1{
		width: 100rpx;
		height: 72rpx;
		z-index: 10;
		top: 0;
		right: 10rpx;
	}
	.swiper-tp{
		width: 690rpx;
		height: 290rpx;
		margin: 30rpx auto;
		
		
	}
	.banner-swiper {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		.play-btn-overlay{
			position: absolute;
			top: 134rpx;
			left: 284rpx ;
			width: 122rpx;
			height: 122rpx;
		}
		.play-btn-img{
			width: 100%;
			height: 100%;
		}
	}
	.slide-image {
		width: 104%;
		height: 100%;
	}
	.category {
		width: 664rpx;
		display: flex;
		flex-wrap: wrap;
		margin: 40rpx auto;
		padding: 0 30rpx;
		justify-content: space-between;
		.category-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 20rpx;
		}
		.category-item:first-child{
			padding-left: 0;
		}
		.category-item:last-child{
			padding-right: 0;
		}
	
		.category-item-info {
			display: flex;
			flex-direction: column;
		}
	
		image {
			width: 92rpx;
			height: 92rpx;
		}
	
		text {
			font-size: 24rpx;
			color: #666666;
			margin-top: 16rpx;
		}
	}
	.recommend-title{
		width: 704rpx;
		height: 44rpx;
		margin: 0 auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-top: 30rpx;
		position: relative;
		padding-left: 20rpx;
	}
	.recommend-title::before{content: '';display: block;position: absolute;left: 0;top: 10rpx; width: 6rpx;height: 24rpx; background: #1DC57C;}
	.recommend-list{
		width: 100%;
		margin-top: 30rpx;
		padding: 0 30rpx;
		.shop-list{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.shop-item{
				width: 335rpx;
				overflow: hidden;
				border-radius: 20rpx;
				background-color: #fff;
				.shop-item-img{
					width: 100%;
					height: 251rpx;
					object-fit: cover;
				}
				.shop-item-info{
					padding: 20rpx 16rpx;
					.shop-item-title{
						font-size: 28rpx;
						color: #333333;
						font-weight: bold;
					}
					.shop-info-footer{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 8rpx;
						align-items: center;
						.quan{
							width: 184rpx;
							height: 32rpx;
							
							image{
								width: 184rpx;
								height: 32rpx;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								position: absolute;
							}
							.quansp{
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #F24040;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-left: 50rpx;
							}
						}
						.shop-item-info-distance{
							font-size: 22rpx;
							color: #999999;
						}
					}
				}
			}
			.shop-item:nth-child(n+3){
				margin-top: 20rpx;
			}
			.shop-item:nth-child(2n){

			}

		}
	}
	.star{width: 180rpx;height: 24rpx;display: flex;justify-content: space-between;}
	
	.poster{
		display: flex;
		align-items: center;
		margin: 0 auto;
		width: 704rpx;
		background-color: #fff;
		padding: 20rpx 0 20rpx 30rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		
		.poster-img{
			width: 101rpx;
			height: 23rpx;
			margin-right: 20rpx;
		}
		.swiper {
			font-size: 26rpx;
			height: 50rpx;
			flex: 1;
		}
		
		.swiper-item {
			display: flex;
			align-items: center;
		}
	}
	
</style>

